<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法4:v-model双向绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1:v-model的双向绑定</h1>
        <h3>我们可以有v-model指令在表单input,textarea,select等元素进行双向绑定
            它会根据控件的类型自动获取正确的方法来更新元素,v-model会忽略所有表单元素的value等初始值
        </h3>
           姓名： <input type="text" V-model="singleText">尊敬的{{singleText}}用户你好！ 
        <h3>2.多行文本框</h3>
        介绍：<textarea name="" id="" v-model="multiText"></textarea>
        我输入的介绍是：{{multiText}}
        <h3>3.单选框</h3>
        <h4>单选框在实际中不能单独使用的,一般要两个及以上,只有统一设计变量,就可以实现radiogroup的效果</h4>
        性别：<input type="radio"  value="男神" v-model="radioValue">男神 
        <input type="radio" value="女神" v-model="radioValue">女神
           <br>原来你是个{{radioValue}}啊！
          <h3>4.单个复选框:单个复选框通常用true和false进行选择</h3>
          <input type="checkbox" v-model="toggleValue">是否好基米，会哈气
          {{toggleValue}}
          <h3>5.多个复选框：v-model接收数组型变量</h3>
          你的爱好：
          <input type="checkbox"  value="唱歌" v-model="checkValue">唱歌
           <input type="checkbox"  value="吃饭" v-model="checkValue">吃饭
            <input type="checkbox"  value="睡觉" v-model="checkValue">睡觉
             <input type="checkbox"  value="哈气" v-model="checkValue">哈气
              <input type="checkbox"  value="踩踩被" v-model="checkValue">踩踩被"
             <br>你的爱好是：{{checkValue.join(',')}}
          <h3>6.单项下拉框</h3>
          我最喜欢的课程是：  <select name="" id="" v-model="sS">
            <option value="java">java</option>
            <option value="python">python</option>
            <option value="基米">基米</option>
            <option value="哈气">哈气</option>
            <option value="c">c</option>
          </select>
          <br>
          我知道你最喜欢的课程是{{sS}}
          <h3>7.多项下拉框</h3>
          选那些人扫地<select name="" id="" multiple  v-model="aaa">
         <option value="A">我是基米啊！</option>
         <option value="B">我是大基米啊</option>
         <option value="C">我是大狗</option>
         <option value="D">我是d</option>
         <option value="E">我是e</option>
          </select>
          <br>我挑选在这些人：{{aaa.join(',')}}
          <h1>课堂小练习</h1>
         用户名：<input type="text"  V-model="a1">
         <br>
         密码：<input  type="password" v-model="a2">
         <br>
         确认密码：<input type="password" v-model="a3" @mouseleave="checck">
          <br>
          性别确认：<input type="radio"  value="男神" v-model="a4">男
        <input type="radio" value="女神" v-model="a4">女
         <br>
         籍贯：<select name="" id="" v-model="a5">
         <option value="杭州">杭州</option>
          <option value="天津">天津</option>
           <option value="湖南">湖北</option>
            <option value="山东">山东</option>
             <option value="西藏">西藏</option>
         </select>
         <br>
         选择户外课程
            <input type="checkbox"  value="篮球" v-model="a6">篮球
            <input type="checkbox" value="足球" v-model="a6">足球
              <input type="checkbox" value="网球" v-model="a6">网球
                <input type="checkbox" value="长跑" v-model="a6">长跑
                  <input type="checkbox" value="爬山" v-model="a6">爬山
                    <input type="checkbox" value="游泳" v-model="a6">游泳
             
         <br>
         <button @click="check">提交</button>
        <h1>知识点二:v-model修饰符号</h1>
        <h3>1.lazy修饰符。v-model在每次input事件触发后将输入框数据与变量同步，添加修饰符后，改为与change同步</h3>
        <input type="text" v-model.lazy="text">{{text}}
        <h3>2.number修饰符,如果用户想要自动将输入的值转换为数值型，可以加.number修饰符</h3>
        <input type="text" v-model.number="num">
        {{num+1}}
        <h3>3.trim修饰符，如果想要自动过滤前后的空白字符，可以加trim修饰符</h3>
         <input type="text" v-model.trim="text">
         {{text+"你好！ "}}
    </div>
</body>
</html>
<script>
    const connApp=Vue.createApp({
    data() {
        return {
              singleText:'',
                multiText:'',
                radioValue:"",
                toggleValue:"false",
                checkValue:[],
                sS:'',
                aaa:[],
                a1:'',
                a2:'',
                a3:'',
                a4:'',
                a5:'',
                a6:[],
                text:'',
                num:''

        }
    },
    
    methods:{
        check(){
            alert("尊敬的"+this.a1+"用户，你是一位"+this.a4+",来自"+this.a5+"你选择的课程是："+this.a6)
        },
      checck(){
        if(this.a2 !== this.a3){
           alert("密码前后不一致")
           this.a2='',
           this.a3
        }
      }  
    },
    

   
 
    }).mount("#app")
</script>